package com.fishingwithme.android.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import coil.compose.AsyncImage
import coil.request.ImageRequest
import com.fishingwithme.android.ui.theme.AppDimensions
import kotlinx.coroutines.launch

/**
 * 通用多图显示组件
 * @param pictures 图片URL列表
 * @param modifier 修饰符
 */
@Composable
fun MultiImageDisplay(
    pictures: List<String>, modifier: Modifier = Modifier
) {
    if (pictures.isEmpty()) {
        // 如果没有图片，显示提示信息
        Box(
            modifier = modifier
                .fillMaxWidth()
                .height(AppDimensions.CARD_HEIGHT_200)
                .background(MaterialTheme.colorScheme.surfaceVariant)
                .clip(RoundedCornerShape(AppDimensions.ROUNDED_CORNER_8)),
            contentAlignment = Alignment.Center
        ) {
            Text(
                text = "暂无图片",
                style = MaterialTheme.typography.bodyMedium,
                color = MaterialTheme.colorScheme.onSurfaceVariant
            )
        }
        return
    }

    val currentIndex = remember { mutableStateOf(0) }
    val listState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()

    Column(modifier = modifier) {
        // 大图显示区域
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(16f / 9f)
                .background(MaterialTheme.colorScheme.surfaceVariant)
                .clip(RoundedCornerShape(AppDimensions.ROUNDED_CORNER_8))
        ) {
            AsyncImage(
                model = ImageRequest.Builder(LocalContext.current)
                    .data(pictures[currentIndex.value]).crossfade(true).build(),
                contentDescription = "大图显示",
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )
        }

        Spacer(modifier = Modifier.height(AppDimensions.SPACING_8))

        if (pictures.size > 1) {
            LazyRow(
                state = listState,
                horizontalArrangement = Arrangement.spacedBy(AppDimensions.SPACING_8),
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = AppDimensions.SPACING_8)
            ) {
                // Show thumbnails for all images except the currently selected one
                itemsIndexed(pictures) { index, picture ->
                    // Skip the currently selected image as it's already shown as the main image
                    // Actually, let's show all thumbnails for better UX - users might want to see
                    // the currently selected image in the thumbnail list as well
                    ImageItem(
                        url = picture, 
                        isSelected = index == currentIndex.value, 
                        onClick = {
                            currentIndex.value = index
                            // 自动滚动到选中的图片
                            coroutineScope.launch {
                                listState.animateScrollToItem(
                                    index = index, 
                                    scrollOffset = 0 // Remove offset to center the item properly
                                )
                            }
                        }
                    )
                }
            }
        }

    }
}

/**
 * 图片项组件
 */
@Composable
private fun ImageItem(
    url: String, isSelected: Boolean, onClick: () -> Unit
) {
    Box(
        modifier = Modifier
            .width(AppDimensions.ICON_SIZE_64)
            .height(AppDimensions.ICON_SIZE_64)
            .clip(RoundedCornerShape(AppDimensions.ROUNDED_CORNER_4))
            .clickable {
                onClick()
            }
            .then(
                if (isSelected) {
                    Modifier.border(
                        AppDimensions.BORDER_WIDTH_2,
                        MaterialTheme.colorScheme.primary,
                        RoundedCornerShape(AppDimensions.ROUNDED_CORNER_4)
                    )
                } else {
                    Modifier
                }
            )
            .background(MaterialTheme.colorScheme.surfaceVariant)
    ) {
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data(url)
                .crossfade(true)
                .build(),
            contentDescription = "缩略图",
            contentScale = ContentScale.Crop,
            modifier = Modifier.fillMaxSize(),
            alignment = Alignment.Center
        )
    }
}
